<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input placeholder="请输入姓名" v-model="tableDa.username" />
      </el-col>
      <el-col :span="4">
        <el-input placeholder="请输入年龄" v-model="tableDa.age" />
      </el-col>
      <el-col :span="4">
        <el-input placeholder="请输入手机号码" v-model="tableDa.haoma" />
      </el-col>
      <el-col :span="4">
        <el-input placeholder="请输入QQ号码" v-model="tableDa.qq" />
      </el-col>
      <el-col :span="5">
        <el-date-picker
          v-model="tableDa.riqi"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-col>
      <el-button @click="addFun" type="primary">添加用户</el-button>
    </el-row>
    
    <div>
      <el-table :data="tableData" style="width: 100% ">
        <el-table-column prop="data" label="序号" width="100">
          <!-- 序号 -->
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="150">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="130" />
        <el-table-column prop="haoma" label="手机号码" width="150" />
        <el-table-column prop="qq" label="QQ号码" width="200" />
        <el-table-column prop="riqi" label="日期" width="150" />
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              @click="gai(scope.row, scope.$index)"
              type="primary"
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              type="danger"
              @click="deluser(scope.$index)"
              icon="el-icon-delete"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹框 -->
    <el-dialog
      title="编辑用户信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
    <!-- 表单开始 -->
      <div>
        <el-form
          :model="objdan"
          ref="form"
          label-width="80px"
        >
          <el-form-item label="姓名" :v-model="objdan" >
            <el-input v-model="objdan.username"></el-input>
          </el-form-item>
          <el-form-item label="年龄" >
            <el-input v-model="objdan.age"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" >
            <el-input v-model="objdan.haoma"></el-input>
          </el-form-item>
          <el-form-item label="QQ号码" >
            <el-input v-model="objdan.qq"></el-input>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
          v-model="objdan.riqi"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
       <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="comform">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableDa: {
        username: "",
        age: "",
        haoma: "",
        qq:'',
        riqi: "",
      },
      objdan: {
        username: "",
        age: "",
        haoma: "",
        qq:'',
        riqi: "",
      },
      dialogVisible: false,
      userindex: 0,
      tableData: [
        // {
        //   username: "张三",
        //   age: 18,
        //   haoma: "16411494984",
        //   qq:'2048634135',
        //   riqi: "2021-10-1",
        // },
      ],
    };
  },
  mounted(){
      this.tableData = JSON.parse(localStorage.getItem('tableDa'))
  },
  methods: {
    handleClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
         this.dialogVisible = false
        })
        .catch((_) => {});
    },
    
    addFun() {
      if (!/^[\u4E00-\u9FA5]{2,4}$/.test(this.tableDa.username)) {
        this.$message({
          message: "用户名只能为中文",
          type: "warning",
        });
        return;
      }
      if (!/^(1[89]|[2-9]\d|100)$/.test(this.tableDa.age)) {
        this.$message({
          message: "请输入正确18~100之间年龄",
          type: "warning",
        });
        return;
      }
      if (!/^[1-9][0-9]{4,10}$/.test(this.tableDa.qq)) {
        this.$message({
          message: "QQ格式不正确",
          type: "warning",
        });
        return;
      }
      if (!this.tableDa.riqi) {
        this.$message({
          message: "请输入日期",
          type: "warning",
        });
        return;
      }
      if (!/^1[3456789]\d{9}$/.test(this.tableDa.haoma)) {
        this.$message({
          message: "请输入正确的电话号码",
          type: "warning",
        });
        return;
      }
      this.tableData.push(this.tableDa);
      
      // this.tableData = JSON.parse(localStorage.getItem('tableDa'))
      localStorage.setItem("tableDa", JSON.stringify(this.tableData));/*  */
      this.tableDa = {
        name: "",
        man: "",
        haoma: "", 
        qq:"",
        riqi: "",
        
      };
    },
    deluser(idx) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.tableData.shift(idx, 1);
        })
        .catch((_) => {});
    },
    //编辑
    gai(item, idx) {
      this.userindex = idx;
      (this.objdan = {
        username:item.username,
        age: item.age,
        haoma: item.haoma,
        qq: item.qq,
        riqi: item.riqi,
      }),
        (this.dialogVisible = true);
    },
    comform() {
      this.dialogVisible = false;
      this.$set(this.tableData, this.userindex, this.objdan);
      // this.tableData[this.userindex] =this.objdan
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss">
::v-deep .is-scrolling-none {
  height: 100vh;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.el-table th.el-table__cell>.cell {
    text-align: center;
}
.el-table td.el-table__cell div {
    text-align: center;
}
</style>